import { memo, useEffect } from 'react';
import type { CSSProperties, FC, PropsWithChildren } from 'react';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { Layout, message } from 'antd';
import { sideMenuAdmin } from '@/routes/menu';
import { userStore } from '@/store/userStore';
import '@/styles/router-transition.css';
import { useRecoilValue } from 'recoil';
import { SecondLayoutStyle } from '@/pages/Profile';
import '@/pages/Profile/index.scss';
import SideMenu from '@/pages/Profile/SideMenu';

const { Sider, Content } = Layout;

const AdminPage: FC<PropsWithChildren<{}>> = () => {
  const user = useRecoilValue(userStore);
  const navigate = useNavigate();
  useEffect(() => {
    if (user.role !== 1) {
      message.warn('权限不足！');
      navigate('/');
    }
  }, [user]);

  return (
    <Layout
      style={SecondLayoutStyle}
      className={'profile-page overflow-hidden'}
    >
      <Sider className={''}>
        <SideMenu menu={sideMenuAdmin} />
      </Sider>
      <Layout className={'profile-main-content'}>
        <Content>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default memo(AdminPage);
